﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="VerificatePage.aspx.cs" Inherits="FBKPI.Pages.VerificatePage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript">
        var oTable;
        $(document).ready(function () {

            $("#divBrowseSuperior").hide();
            $("#divBrowseSuperior").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });

            mainmenu("#nav ul", "#nav li");
            mainmenu("#menu_wrap ul", "#menu_wrap li");


            //datatable section
            oTable = $("#VerificationTable").dataTable({
                "oLanguage": {
                    "sZeroRecords": "No records to display",
                    "sSearch": "Search"
                },
                "bSort": true,
                "bPaginate": true,
                "bAutoWidth": false,
                "bProcessing": true,
                "bServerSide": true,
                "bDestroy": true,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bDeferRender": true,
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "GET",
                        "url": "../Serializer/KPIAssignDetailByVerificatorSerializer.ashx?CurrentUser=" + $("#txt_user").val() + "&Year=" + $("#txt_selectyear").val(),
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "aoColumns": [
             {
                 "mData": "ID"
             }, {
                 "mData": "No"
             }, {
                 "mData": "KPIAssignID"
             }, {
                 "mData": "KPI"
             }, {
                 "mData": "CreateBy"
             }, {
                 "mData": "Month"
             }, {
                 "mData": "Year"
             }, {
                 "mData": "Realization"
             }, {
                 "mData": "Score"
             }, {
                 "mData": "StatusByUser"
             }, {
                 "mData": "StatusByVerificator"
             }, {
                 "mData": "Notes"
             }, {
                 "mData": "Weight"
             },

            {
                "mData": "UoMMax"
            },
            {
                "mData": "UoMMin"
            }

             ],
                "aoColumnDefs": [{
                    "fnRender": function (oObj) {
                        return "<a href=\"#\" onclick=\"DirectTo('" + oObj.aData["ID"] + "','" + oObj.aData["KPIAssignID"] + "','" + $("#txt_user").val() + "')\"><img src='../images/detail.png' /></a>";
                    },
                    "aTargets": [0]
                }, {
                    "sClass": "center",
                    "aTargets": [0, 1, 12]//, 9, 11, 12]
                },
                 {
                     "fnRender": function (oObj) {
                         if (oObj.aData["CreateBy"] != '') {
                             return "<a href='#' onclick='ShowEmployee(" + oObj.aData["KpiId"] + ")'>" + oObj.aData["CreateBy"].toString() + "</a>";
                         }
                         else {
                             return "";
                         }
                     },
                     "aTargets": [4]
                 },
                {
                    "bVisible": false,
                    "aTargets": [2, 5, 7, 8, 11]
                }]
            });

            ShowEmployee = function (KpiID) {
                $("#divBrowseSuperior").dialog("option", "title", '<span class="header-text">Assigned Employee</span>');
                $("#divBrowseSuperior").dialog("open");
                $('#superior').dataTable({
                    "oLanguage": {
                        "sZeroRecords": "No records to display",
                        "sSearch": "Search"
                    },
                    "bSort": true,
                    "bPaginate": true,
                    "bAutoWidth": false,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bDestroy": true,
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bDeferRender": true,
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "GET",
                            "url": "../Serializer/EmployeeByKPIAssignDtlSerializer.ashx?KpiID=" + KpiID,
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Lokasi" },
                        { "mData": "Nama" },
                        { "mData": "Departemen" },
                        { "mData": "Section" },
                        { "mData": "SubSection" },
                        { "mData": "Jabatan" }


                    ],
                    "aoColumnDefs":
                    [
                    {
                        "bVisible": false,
                        "aTargets": [4,5]
                    }
                    ]
                });

                //mark selected row
                $('body').on("click", '#superior tbody tr', function () {
                    $('#superior tbody tr').removeClass("row_selected");
                    $(this).addClass("row_selected");
                });
                $(".dataTables_filter input").focus();

                return false;
            }

            //mark selected row
            $('body').on("click", '#VerificationTable tbody tr', function () {
                $('#VerificationTable tbody tr').removeClass("row_selected");
                $(this).addClass("row_selected");
            });
            //--------------------end of mark selected row-----------------------------
            //$("#VerificationTable_filter label").after('&nbsp;KPI Year: <input id=\"txt_selectyear\" oninput=\'GetList($(this).val());\' type=\"text\" \>');
            //--------------------end of datatable section-----------------------------------------
            DirectTo = function (KPIAchievementID, KPIAssignID, user) {
                document.location = "../Pages/InputVerificationPage.aspx?User=" + user + "&KPIAssign=" + KPIAssignID + "&KPIAchievement=" + KPIAchievementID;
                return false;
            }
        });

        GetList = function (value) {
            if (value.length > 0) {
                var xx = '0123456789';
                if (xx.indexOf(value[value.length - 1]) < 0) {
                    $("#txt_selectyear").val(value.toString().replace(value[value.length - 1], ''));
                }

                if (value.length == 4) {
                    oTable.fnDraw();
                }
            }
            else
            { oTable.fnDraw(); }
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div style="height: 525px; overflow: auto;">
        <div id="verificationtable">
            <div>
                <div class="customPageHeader">
                    <span class="customPageTitle">KPI Verification</span>
                </div>
                <div class="ui-widget-content">
                    <table cellpadding="0" cellspacing="0" class="display" id="VerificationTable">
                        <thead>
                            <tr>
                                <th>
                                </th>
                                <th>
                                    No
                                </th>
                                <th>
                                    KPI Assign
                                </th>
                                <th>
                                    KPI
                                </th>
                                <th>
                                    Assigned Employee
                                </th>
                                <th>
                                    Month
                                </th>
                                <th>
                                    Year
                                </th>
                                <th>
                                    Realization
                                </th>
                                <th>
                                    Score
                                </th>
                                <th>
                                    Status By User
                                </th>
                                <th>
                                    Status By Verificator
                                </th>
                                <th>
                                    Notes
                                </th>
                                <th>
                                    Weight
                                </th>
                                <th>
                                    UoM Max.
                                </th>
                                <th>
                                    UoM Min.
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
     <div id="divBrowseSuperior" class="ui-widget-content padding5px ui-corner-all">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="superior">
            <thead>
                <tr>
                    <th>
                        No
                    </th>
                    <th>
                        Lokasi
                    </th>
                    <th>
                        Nama
                    </th>
                    <th>
                       Departemen 
                    </th>
                    <th>
                       Section 
                    </th>
                     <th>
                       Sub Section 
                    </th>
                    <th>
                        Jabatan
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</asp:Content>
